<script>
  import Vue from 'vue';
  import Component from 'vue-class-component';

  import personal from "../components/personal.vue";
  import topNav from "../components/topNav.vue"
  import RandomBlogComponent from "../components/RandomBlogComponent.vue"
  import bottomInfo from "../components/bottomInfo.vue"
  import axios from "axios";

  export default {
    data() {
      return{

        momentList:[],
        test:'今天最热闹的事估计就是 [jsDelivr 在中国的 CDN 服务裂了](www.baidu.com)，众多博客都成了纯文本，简直是三年一遇\n' +
          '\n' +
          '由于本博客连 Vue 的 js 文件都是用的 cdn，所以如果当时你访问了，甚至连一个字都看不到\n' +
          '\n' +
          '官方最后的解决办法还是暂时把国内的域名解析切换到了 Fastly CDN，官方回复也是匪夷所思\n' +
          '\n' +
          '有趣的是，因为 bootcdn 主页也用了 jsDelivr 的 cdn，导致它自己的页面样式也乱了，太魔幻了'+
          '![DESC](http://localhost:9260/getimg/19baf575-8ada-4d36-bd97-516a3c027404.png)'
      }
    },
    components: {
      personal,
      topNav,
      RandomBlogComponent,
      bottomInfo
    },
    methods:{
      getMoment() {
        axios.get('/getmoment').then(res=> {
          this.momentList=res.data.data
        })
      }
    },
    created() {
      this.getMoment()
    }
  }
</script>

<template>
  <div ref="app" class="app" style="background-color: white">
    <topNav></topNav>
    <div class="m-as">
      <div class="m-title">Moments</div>
      <div style="  position: absolute;
  bottom: -30px;
  color: white;
  right: 10%;  transform: translateX(-50%)">
        <div style="display: flex;">
          <div style="font-size: 13px;margin-right: 10px;text-align: center;text-shadow: 0 5px 10px #000000">
            <div style=" font-family: 'Ubuntu', sans-serif;;font-size: 23px;position: relative;top: 40%;transform: translateY(-50%)">RoChes</div>
          </div>
          <el-image :src="require('../assets/images/headshot.jpg')" style="width: 90px;border-radius:45px"></el-image>
        </div>
      </div>
    </div>
    <el-container class="middle" style="min-height: 100vh">
      <el-aside style="position: relative;">
      </el-aside>
      <el-main style="margin-top: 40px;width: 55vw;overflow: hidden">
        <div class="one-moment" v-for="item in momentList">
          <div style="display: flex;width: 100%">
            <el-image :src="require('../assets/images/headshot.jpg')" style="z-index: 990;width: 45px;height: 45px;border-radius:5px"></el-image>
            <div style="width: 100%">
              <div style=";color: seagreen;margin-left: 10px;font-family: 'Ubuntu', sans-serif;font-size: 20px">RoChes</div>
              <v-md-preview :text=item.content style="padding: 0;width: 100%;position: relative;right: 25px;z-index: 20;bottom:0"></v-md-preview>
              <div style="color: gray;font-size: 15px;margin-left: 10px;margin-bottom: 20px">{{item.time}}</div>
            </div>
          </div>
        </div>
      </el-main>
      <el-aside style="position:relative;">
      </el-aside>
    </el-container>
    <bottomInfo></bottomInfo>
  </div>
</template>

<style>
  @import url("http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin");
  @import "../assets/common.css";
</style>
<style scoped>
  @import "../assets/moments.css";
</style>

